<div class="color-manipulation-container">
    <div class="color-manipulation-overlay" [class.nonsupport]="!isSupport"></div>
    <nz-table nzSize="small" [nzData]="[1]" [nzShowPagination]="false" [nzBordered]="true">
        <tbody>
        <tr>
            <td>色调</td>
            <td>{{hue}} °</td>
            <td><input id="hue" type="range" min="-180" max="180" value="0" [(ngModel)]="hue"
                       (ngModelChange)="triggerChange()"/></td>
        </tr>
        <tr>
            <td>浓度</td>
            <td>{{chroma}} %</td>
            <td><input id="chroma" type="range" min="0" max="100" value="100" [(ngModel)]="chroma"
                       (ngModelChange)="triggerChange()"/></td>
        </tr>
        <tr>
            <td>亮度</td>
            <td>{{lightness}} %</td>
            <td><input id="lightness" type="range" min="0" max="100" value="100" [(ngModel)]="lightness"
                       (ngModelChange)="triggerChange()"/></td>
        </tr>
        </tbody>
    </nz-table>
</div>
